var tgd = tgd || {};
tgd.Math = tgd.Math || {};
tgd.Math.Views = tgd.Math.Views || {};

tgd.Math.Views.DOMMandelbrot = function (mandelbrot, canvas, callback) {
	this._mandelbrot = mandelbrot;
	this._canvas = canvas;
	this._callback = callback;
	this._pixelHolder = document.createElement("div");  //used as temporary container off all pixels for performance

	//variables used to "asynchronously" draw image, so UI is quasi-responsive
	this._current = 0;
	this._stopper = Math.pow(this._mandelbrot.getDimension(), 2);

	this._canvas.innerHTML = "";
	this._canvas.style.width = this._canvas.style.height = this._mandelbrot.getDimension() + "px";

	var self = this;

	var drawRow = function() {
		if (self._current < self._stopper) {
			for (var i = 0; i < self._mandelbrot.getDimension(); ++i, ++self._current) {
				var val = self._mandelbrot.getIthValue(self._current);
				var color = (val == self._mandelbrot.getMaxIteration() ? "#000000" : "#" + ("000000" + ((val + 100000) * 10).toString(16)).match(".{6}$"));
				var pixel = document.createElement("div");
				pixel.className = "pixel";
				pixel.style.backgroundColor = color;
				self._pixelHolder.appendChild(pixel);
			}
			setTimeout(drawRow, 0);
		} else {
			self._canvas.appendChild(self._pixelHolder);
			self._callback();
		}
	};

	setTimeout(drawRow, 0);
}